<template>
  <div class="home">
    <!-- 导航栏 -->
    <div class="header w">
      <div class="logo">
        <img src="../assets/biaozhi.png" alt="" />
      </div>
      <div class="nav">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="#">免费课程</router-link></li>
          <li><router-link to="#">项目实战</router-link></li>
          <li><router-link to="#">职业规划</router-link></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" value="记得快忘得慢" />
        <button>搜索</button>
      </div>
      <div class="user">
        <router-link to="#">会员中心</router-link> |
        <router-link to="#">我的学习</router-link> |
        <router-link to="#">登录/注册</router-link>
      </div>
    </div>
    <!-- 导航栏结束 -->
    <!-- 中间部分开始 -->
    <div class="banner">
      <div class="banana">
        <img src="../assets/kouyubg.png" alt="" />
      </div>
      <div class="apply">
        <h1>雅思口语单项冲分班</h1>
        <p>主讲老师：陈宇夏&nbsp;琪琛&nbsp;</p>
        <p>课时数量：21</p>
        <p>开课时间：2021-09-13 20:30:00</p>
        <p>有效期至：2022-09-12 20>:30</p>
        <p>
          报名还剩
          <span style="color: #ffe400; font-weight: 700">14</span>天<span
            style="color: #ffe400; font-weight: 700"
            >22</span
          >时<span style="color: #ffe400; font-weight: 700">04</span>分
        </p>
        <div class="apply-button">
          <router-link class="a" to="#">立即参加</router-link>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="bigbox">
        <div class="bigbox-left">
          <div class="bigbox-header">
            <h2>课程介绍</h2>
          </div>
          <div class="class-image">
            <img
              src="https://edu-image.nosdn.127.net/0a5246a7c3444c86a103a55825943518.png?imageView&quality=100"
              alt=""
            />
            <img
              src="https://edu-image.nosdn.127.net/6552276eb9864f2ba15492dd0a38ca80.jpg?imageView&quality=100"
              alt=""
            />
            <img
              src="https://edu-image.nosdn.127.net/08d723323325450ea618e0f931a1828c.png?imageView&quality=100"
              alt=""
            />
            <img
              src="https://edu-image.nosdn.127.net/a2d76c7910614a6bb65ca8d350f1268c.png?imageView&quality=100"
              alt=""
            />
          </div>
        </div>
        <div class="bigbox-right">
          <div class="bigbox-header">
            <h2>课程提示</h2>
          </div>
          <div class="tishi">
            <p>如何查看已购课程？</p>
            <p>课程购买后可以更换吗？</p>
            <p>直播结束后会有回放吗？</p>
            <p>无法登录怎么办？</p>
            <p>如何用手机听课？</p>
            <p>课程过期了怎么办？</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部开始 -->
    <div class="footer">
      <div class="w">
        <div class="title">
          <ul>
            <li><router-link to="#">关于我们</router-link></li>
            <li><router-link to="#">联系我们</router-link></li>
            <li><router-link to="#">帮助中心</router-link></li>
            <li><router-link to="#">客户服务</router-link></li>
            <li><router-link to="#">新手指南</router-link></li>
            <li><router-link to="#">合作机构</router-link></li>
            <li><router-link to="#">合作导师</router-link></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: auto;
}
.header {
  height: 42px;
  /* 上下30 */
  margin: 30px auto;
}
/* 去除li样式 */
li {
  list-style: none;
}
/* 去除所有a链接下划线 */
a {
  text-decoration: none;
  color: #050505;
}
.logo {
  float: left;
  width: 198px;
  height: 42px;
}
.logo img {
  width: 198px;
  height: 42px;
}
.nav {
  float: left;
  margin-left: 10px;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  height: 42px;
  /* 上下给0 左右给10 */
  padding: 0 10px;
  /* 垂直居中 */
  line-height: 42px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #050505;
}
/* 鼠标划过 下划线 */
.nav ul li a:hover {
  border-bottom: 2px solid rgb(255, 63, 41);
  color: rgb(255, 63, 41);
}
.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 15px;
}
.search input {
  float: left;
  width: 320px;
  height: 40px;
  border: 1px solid rgb(255, 63, 41);
  /* 将边框右设为0 */
  border-right: 0;
  color: #bfbfbf;
  font-size: 14px;
  padding-left: 15px;
  border-radius: 5px 0 0 5px;
  /* 去除被点击时的黑框 */
  outline: none;
}
.search button {
  float: left;
  width: 70px;
  height: 42px;
  background-color: rgb(255, 63, 41);
  border: 0;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}
.user a {
  line-height: 42px;
  color: #050505;
}
.user a:hover {
  color: rgb(255, 63, 41);
}
/* 导航部分结束 */
/* 中间部分开始 */
.banner {
  height: 508px;
  /* background-color: red; */
}
/* 绝对定位 */
.banana {
  position: absolute;
}
.banana img {
  width: 1688px;
  height: 508px;
}
/* 相对定位 */
.apply {
  float: right;
  position: relative;
  width: 500px;
  height: 508px;
  /* background-color: aqua; */
  margin-right: 240px;
  margin-top: 100px;
  text-align: left;
}
.apply h1 {
  color: #fff;
  margin-left: 100px;
  margin: 0 0 12px;
}
.apply p {
  color: #fff;
  font-size: 17px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0 0 12px;
}
.apply .apply-button {
  width: 300px;
  height: 54px;
  background-color: #fb4a3e;
  line-height: 54px;
  text-align: center;
}
.apply-button a {
  color: #fff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 700;
}
/* 课程介绍 */
.introduce {
  background-color: rgb(242, 242, 242);
  height: 5900px;
  margin-top: -100px;
}
.bigbox {
  width: 1360px;
  height: 350px;
  /* background-color: aqua; */
  margin: auto;
  margin-top: 90px;
}
.bigbox-left {
  float: left;
  width: 838px;
  height: 5650px;
  background-color: #fff;
  border-radius: 8px;
}
.bigbox-right {
  float: right;
  width: 370px;
  height: 350px;
  background-color: #fff;
}
.bigbox-right .tishi {
  margin: 0 auto;
  margin-top: 20px;
  width: 300px;
  height: 250px;
  border-top: 1px solid #f2f2f2;
  /* background-color: red; */
}
.tishi p {
  text-align: left;
  padding: 10px 14px;
  color: #65676e;
  font-size: 17px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.bigbox-header {
  height: 45px;
}
.bigbox-header h2 {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
}
.class-image {
  margin-top: 40px;
}
/* 课程提示 */
/* 底部 */
.footer {
  height: 178px;
  background-color: rgb(71, 68, 67);
}
.footer ul li {
  float: left;
}
.footer ul li a {
  color: #fff;
  padding: 20px;
}
.footer .title {
  width: 800px;
  height: 30px;
  /* background-color: red; */
  padding-top: 30px;
}
.footer .title a:hover {
  border-bottom: 2px solid #fff;
}
</style>